<template>
  <el-drawer
    :append-to-body="true"
    title="页面设置"
    :size="320"
    custom-class="setting-drawer"
    :visible.sync="drawerVisible"
    @close="closeDrawer"
  >
    <div class="d-flex-c full-box p-h-mini">
      <div class="p-b-s p-t-s">
        <el-divider content-position="left">
          风格设置
        </el-divider>
      </div>
      <el-row :gutter="12">
        <el-col
          :span="12"
          v-for="(item, i) in themeList"
          :key="i"
        >
          <div
            @click="changeTheme(item.value)"
            class="theme-item"
            :class="{active: item.value === currentTheme}"
          >
            <img
              class="item-icon"
              :src="item.icon"
            >
            <div class="f-14">
              {{ item.label }}
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="p-b-s p-t-s">
        <el-divider content-position="left">
          系统模块显示设置
        </el-divider>
      </div>
      <el-alert
        title="① 点选是否显示，② 拖拽调整顺序"
        type="info"
        show-icon
      />
      <draggable
        v-model="list"
        class="list-container p-h-mini p-b-mini flex-1 overflow-auto"
        @change="updateList"
      >
        <div
          class="flex-between list-item c-pointer"
          v-for="item in list"
          :key="item.id"
          @click="changeShow(item)"
        >
          <span>{{ item.name }}</span>
          <el-checkbox
            v-model="item.is_valid"
            true-label="1"
            false-label="0"
            @click.stop.native=""
          />
        </div>
      </draggable>
      <div class="d-flex ai-c jc-c m-v-mini b-t p-t-mini">
        <el-button
          @click="confirm"
          size="small"
          type="primary"
        >
          确认
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import draggable from 'vuedraggable'
import { dictionarySchema } from '@/configs'
export default {
  name: 'Setting',
  data () {
    return {
      drawerVisible: false,
      list: [],
      themeList: [
        { label: '科技绚蓝', value: 'Sphere', icon: require('@/assets/images/hbsw/moshi1.jpg') },
        { label: '淡雅幽静', value: 'Card', icon: require('@/assets/images/hbsw/moshi2.jpg') }
      ],
      currentTheme: this.value
    }
  },
  components: {
    draggable
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value (v) {
      this.currentTheme = v
    },
    currentTheme (v) {
      this.$emit('input', v)
    }
  },
  methods: {
    async fetchListData () {
      const data = await this.$request.post('/ysjc/zhzs/getuserclient', { appId: 'YSJC', bzCode: 'YSJC' })
      this.list = data
    },
    open () {
      this.fetchListData()
      this.drawerVisible = true
    },
    changeShow (item) {
      item.is_valid = item.is_valid === '1' ? '0' : '1'
      this.updateList()
    },
    updateList (data) {
      this.$emit('update', this.list.filter(item => item.is_valid === '1'))
    },
    closeDrawer () {
      if (this.isConfirm) {
        this.isConfirm = false
        return
      }
      this.$emit('restore')
    },
    async confirm () {
      this.isConfirm = true
      await this.$request.singleTableOperation({
        metaSet: 'YSQJC_LBMH_CLIENT',
        methodCode: 'batch',
        methodParams: {
          batchParam: this.list.map((item, i) => ({
            APPID: item.appid,
            USER_ID: item.user_id,
            APP_SORT: i + 1,
            IS_VALID: item.is_valid
          }))
        }
      })
      this.$message.success('保存成功')
      this.drawerVisible = false
      this.$emit('saveSuccess')
    },
    changeTheme (value) {
      this.currentTheme = value
      this.$emit('changeTheme', value)
      window.localStorage.setItem(`${dictionarySchema}_theme`, this.currentTheme)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  height: 40px;

  &:not(:last-child) {
    border-bottom: 1px solid #f4f4f4;
  }
}
</style>
